<template>
  <el-form-item v-bind="options" @click.prevent>
    <template #label>
      <span>{{label}}</span>
      <span v-if="description" style="margin-left: 5px;">
        <el-tooltip :content="description">
          <ac-icon iconId="018dca8ec9890493be26" />
        </el-tooltip>
      </span>
    </template>
    <draggable
      v-model="currNode"
      :class="currNode.children.length === 0 ? 'empty' : ''"
      @mouseoverNode="mouseoverNode"
      @activeNode="activeNode"
      @deleteNode="deleteNode"
    />
  </el-form-item>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import Draggable from '@/admin/visual/draggable.vue';
import visual from "@/visual/js/visual";
import tool from "@/utils/tool";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
const props = defineProps({
  node: Object,
  compStyle: Object
});
const currNode = ref(props.node);
const label = ref();
const description = ref();

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};

const options = computed(() => {
  const compStyle = props.compStyle || {};

  let required = false;
  tool.walkTree(currNode.value, node => {
    if (node.id && node.formItem === '1' && node.currCompStyle && node.currCompStyle['required']) {
      required = true;
    }
  });

  const data = {};
  data['required'] = required;
  visual.addIfNotNull(data, compStyle, 'labelWidth');
  return data;
});

watch(() => props.compStyle, (compStyle) => {
  label.value = compStyle['label'] || '';
  description.value = compStyle['description'] || '';
}, {immediate: true, deep: true});
</script>